<template>
    <div>
        <el-container>
          <el-main>
            <div class="report">
              <p>
                结案报告
              </p>
            </div>
            <div clss="report-info-body">
              <div>
                <el-table fixed :data="reportForm" stripe style="width: 100%" max-height="500">
                  <el-table-column prop="stuId" label="学号" align="center"></el-table-column>
                  <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
                  <el-table-column prop="sex" label="性别" :formatter="isSEX" align="center"></el-table-column>
                  <el-table-column prop="phone" label="电话号码" align="center"></el-table-column>
                  <el-table-column prop="typeQuestion" label="问题类型" align="center"></el-table-column>
                  <el-table-column prop="consultCount" label="咨询次数" align="center"></el-table-column>
                  <el-table-column align="center" label="操作" fixed="right" width="200">
                    <template #default="scope">
                    <el-button size="mini" type="primary" @click="lookForm(scope.$index, scope.row)" style="background-color: #409EFF;border-color: #409EFF;color:#fff;">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div>
            <el-dialog title="结案报告" v-model="dialogTableVisible" :before-close="handleClose">
              <el-form :model="formData">
                <el-form-item label="学号" prop="stuId" style="width: 80%;" >
                  <el-input name="stuId" v-model="formData.stuId" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="stuName" style="width: 80%;">
                  <el-input name="stuName" v-model="formData.stuName" disabled></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex" style="width: 80%;">
                  <el-input name="sex" v-model="formData.sex" disabled></el-input>
                </el-form-item>
                <el-form-item label="问题类型" prop="typeQuestion" style="width: 80%;">
                  <el-input name="typeQuestion" v-model="formData.typeQuestion" disabled></el-input>
                </el-form-item>
                <el-form-item label="咨询次数" prop="consultCount" style="width: 80%;">
                  <el-input name="consultCount" v-model="formData.consultCount" disabled></el-input>
                </el-form-item>
              </el-form>
            </el-dialog>
            </div>
          </el-main>
        </el-container>
    </div>
</template>

<script>
    import request from "../../utils/request";


    export default {
        name: "closedReport",
      data(){
          return{
            disabled:true,
            dialogTableVisible : false,

            reportForm:[{
              stuId:'',
              stuName:'',
              sex:'',
              phone:'',
              typeQuestion:'',
              consultCount:'',
            }],
            formData:{
              stuId:'',
              stuName:'',
              sex:'',
              phone:'',
              typeQuestion:'',
              consultCount:'',
            }
          }
      },

      methods :{


        isSEX(row, column) {
          if (row.sex === 0 ){
            return '男'
          }else if(row.sex === 1){
            return '女'
          } else {
            return '我宣布你是男的'
          }
        },

          
        lookForm : function (index,row) {
          this.dialogTableVisible = true;
          this.formData = Object.assign({},row);
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
        },


        getClosedReport(){
            return request({
              url:'/api/endReport/getallEndReport',
              method:'get'
            })
          },
        //获取数据
        getData(){
          this.getClosedReport().then(res => {
            if(res.code ===1) {
              this.reportForm = res.data;
              console.log(res.data)
            }
          })
        },
      },
      created() {
          this.getData()
      }
    }
</script>

<style scoped>
    .report {
        width: auto;
        height: 56px;
        background-color: #EDEFF2;
        font-size: 22px;
        /* font-family: SimHei; */
        font-weight: 400;
        color: #333333;
        line-height: 48px;
        border-left: 6px solid #409EFF;
        text-align: left;
    }
</style>